<template>
  <van-tabbar fixed route v-model="active" @change="handleChange" safe-area-inset-bottom>
    <van-tabbar-item
      v-for="(item, index) in data"
      :to="item.to"
      icon-prefix="icon"
      :icon="`${item.icon}weixuanzhong`"
      :key="index"
    >
      {{ item.title }}
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
export default {
  name: 'TabBar',
  props: {
    defaultActive: {
      type: Number,
      default: 0
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      active: this.defaultActive
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('change', value)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
$bc: #1e2430;

.van-tabbar {
  background-color: $bc;
  height: 50px;
  z-index: 99;
  /deep/.van-tabbar-item {
    font-size: 12px;
    color: #9599ac;
    .van-tabbar-item__icon i {
      font-size: 24px;
    }
    &.van-tabbar-item--active {
      color: #1c8eff; //#fff;
      background-color: $bc;
    }
  }
  .icon {
    width: 24px;
    height: 24px;
    display: block;
    margin: 0px auto 4px;
    font-size: 24px;
  }
  &::after {
    display: none;
  }
}
</style>
